<template>
  <div class="tabbar">
    <ul>
        <li>
            <i class="iconfont">&#xe667;</i>
            <p>电影</p>
        </li>
        <li>
            <i class="iconfont">&#xe61d;</i>
            <p>影院</p>
        </li>
        <li>
            <i class="iconfont">&#xe601;</i>
            <p>我的</p>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.tabbar{
    z-index: 100000;
    background: white;
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    padding:0 var(--space);
    border-top:1px solid rgb(245,245,245);
}

.tabbar ul{
    display:flex;
}

.tabbar ul li{
    width:calc(100% / 3);
    padding:0.05rem 0;
    text-align: center;
    font-size:0.2rem;
}

.tabbar ul li p{
  padding-top:0.05rem;
}

.tabbar ul li i{
  font-size:0.2rem;
}

</style>
